<template>
    <div class="content">
        <ul class="list">
            <li>IIFA中国顾问委员会名单(排名不分先后)</li>
            <li v-for="item in chinaData" :key="item.name">
                <p v-text="item.name"></p>
                <p v-text="item.company"></p>
                <p v-text="item.post"></p>

            </li>
        </ul>
    </div>
</template>
<script setup lang="ts">
import type { ChinaModel } from '@/api/china';
import { chinaListApi } from '@/api/china';
const chinaData = ref<ChinaModel[]>([])
onMounted(() => {
    chinaListApi().then(res => {
        chinaData.value = res.data ?? []
    })
})



</script>
<style scoped lang='less'>
.content {
    width: calc(100% - 220px);
    // background-color: red;
    height: 100%;
    padding-left: 25px;

    >.list {
        li {
            list-style: none;

        }
        margin-bottom: 20px;

        li:first-child {
            font-size: 20px;
            font-weight: bold;
        }

        li:not(:first-child) {
            margin-top: 15px;
            font-size: 16px;
            color: #727171;
        }
        p{
            color: #2C3E50;
        }
        li:nth-child(n+2) {
            display: flex;

            p:first-child {
                width: 60px;
                text-align-last: justify;
            }

            p:nth-child(2) {
                width: 300px;
                padding-left: 30px;
            }

            p:last-child {
                width: 150px;
            }

        }
    }

}
</style>
